import React from 'react'
import { Link, Control } from 'react-keeper'
import { Accordion, Button, Flex, WingBlank, WhiteSpace, List, InputItem,Switch,Stepper,Toast,Range,Card,NavBar,Icon, TextareaItem } from 'antd-mobile';

const Item = List.Item;
const Brief = Item.Brief;

export default class InfoView extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <WhiteSpace/>
        <div style={{
          height: '100px',
          backgroundColor: 'white',
          position: 'relative',
          padding: '10px 0 10px 20px'
        }}>
          <div style={{width: '100px', height: '100px', borderRadius: '50%', overflow: 'hidden', marginRight: '20px', display: 'inline', float: 'left'}}>
            <img src={this.props.info.headImgUrl} style={{width: '100px', height: '100px'}}/>
          </div>
          <div style={{width: '250px', height: '100px', display: 'table-cell', verticalAlign: 'middle', position: 'relative'}}>
            <p style={{width: '100%', margin: '0', padding: '0', fontSize: '24px'}}>{this.props.info.nickname}</p>
          </div>
        </div>
        <WhiteSpace/>
        <List>
          <Item arrow="horizontal" onClick={() => {Control.go('/home/introduce');}}>个人详情</Item>
        </List>
        <WhiteSpace/>
      </div>
    )
  }
}

InfoView.propTypes = {
  info: React.PropTypes.object.isRequired,
};

